<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>改变盒子大小</title>
    <style>
        #box{
            margin: 0 auto;
            background: #ff0000;
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
<script>
    var box=document.getElementById('box');
    var i=0;
    box.onclick=function () {
        i++;
        if (i%2){
            this.style.width='300px';
            this.style.height='300px';
            this.innerHTML='大';
        }else {
            this.style.width='20px';
            this.style.height='20px';
            this.innerHTML='小';
        }
    }
</script>
</html>